<template>
  <j-modal
    :title="title"
    :width="1600"
    :visible="visible"
    :confirmLoading="confirmLoading"
    v-bind:prefixNo="prefixNo"
    switchFullscreen
    @cancel="handleCancel"
    wrapClassName="ant-modal-cust-warp"
    :id="prefixNo"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button  key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-tabs default-active-key="1" @change="getEngineerInfo">
          <a-tab-pane key="1" tab="工程信息" forceRender>
             <a-row :gutter="24">
                <a-col :md="24">
                  <a-card :bordered="false">
                    <!-- 查询区域 -->
                    <div>
                      <a-form :form="project_info_form">
                        <a-form-item  label="工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          {{model.name}}
                        </a-form-item>
                        <a-form-item  label="工程地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          {{model.unit}}
                        </a-form-item>
                        <a-form-item label="甲方名称" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                          {{model.nameA}}
                        </a-form-item>
                        <a-form-item label="纳税人信息" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                          {{model.taxpayerInfo}}
                        </a-form-item>
                        <a-form-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol" >
                          {{model.money}}
                        </a-form-item>
                        <a-form-item label="项目类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          {{model.type}}
                        </a-form-item>
                        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
                          {{model.description}}
                        </a-form-item>
                      </a-form>
                    </div>
                  </a-card>
                </a-col>
              </a-row>
          </a-tab-pane>
          <a-tab-pane key="2" tab="产品下单信息"  forceRender>
             <a-row :gutter="24">
                <a-col :md="24">
                  <a-card :bordered="false">
                    <div class="table-operator" style="border-top: 5px">
                      <a-button   @click="myHandleProduce(model)" type="primary" >产品下单</a-button>
                      <a-button   @click="myStatisticProduce(model,'下单管理')" type="primary" >下单统计</a-button>
                      <span style="float: right;overflow: hidden;" >
                          <a-button type="primary" @click="searchQuery()">获取数据</a-button>
                      </span>
                    </div>
                    <!-- 查询区域 -->
                    
                    <div>
                      <a-table
                        ref="table1"
                        bordered
                        size="middle"
                        rowKey="id"
                        :columns="esTable.columns"
                        :dataSource="esTable.dataSource"
                        :pagination="ipagination"
                        :loading="esTable.loading"
                        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                        :actionButton="true"
                        @change="handleTableChange">
                        <span slot="action" slot-scope="text, record">
                          <a @click="myProduceDetail(record)">查看</a>
                          <a-divider   type="vertical" />
                          <a  v-if="record.state===0"  @click="produceEdit(record)">编辑</a>
                          <a  v-if="record.state===2" style="color:gray" >编辑</a>
                        </span>
                        <!-- 状态渲染模板 -->
                        <template slot="customRenderFlag" slot-scope="state">
                          <a-tag v-if="state===0" color="orange">待生产</a-tag>
                          <a-tag v-if="state===2" color="green">已完成</a-tag>
                        </template>
                      </a-table>
                    </div>
                    <engineer-produce-detail ref="engineerProduceDetail"></engineer-produce-detail>
                    <engineer-produce-modal ref="engineerProduceModal"></engineer-produce-modal>
                    <engineer-produce-statistic ref="produceStatistic"></engineer-produce-statistic>
                  </a-card>
                </a-col>
              </a-row>
          </a-tab-pane>
            <a-tab-pane key="3" tab="产品发货信息" forceRender>
               <a-row :gutter="24">
                <a-col :md="24">
                  <a-card :bordered="false">
                     <div class="table-operator" style="border-top: 5px">
                      <a-button   @click="myStatisticDevliery(model,'发货管理')" type="primary" >发货统计</a-button>
                      <span style="float: right;overflow: hidden;" >
                          <a-button type="primary" @click="searchQuery()">获取数据</a-button>
                      </span>
                    </div>
                    <div>
                      <a-table
                        ref="table2"
                        bordered
                        size="middle"
                        rowKey="id"
                        :columns="edTable.columns"
                        :dataSource="edTable.dataSource"
                        :pagination="ipagination"
                        :loading="edTable.loading"
                        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                        :actionButton="true"
                        @change="handleTableChange">
                        <span slot="action" slot-scope="text, record">
                            <a @click="myDeliveryDetail(record,'发货管理')">查看</a>

                               <a-divider  type="vertical" />
                            <a v-if="record.state==='待发货'"  @click="deliveryEdit(record)">编辑</a>
                            <a v-if="record.state==='已发货'"  style="color:gray">编辑</a>
                          </span>
                            <!-- 状态渲染模板 -->
                        <template slot="customRenderFlag" slot-scope="state">
                          <a-tag v-if="state==='已发货'" color="green">已发货</a-tag>
                          <a-tag v-if="state==='待发货'" color="orange">待发货</a-tag>
                          <a-tag v-if="state==='已收货'" color="blue">已收货</a-tag>
                        </template>
                      </a-table>
                      </div>
                    <delivery-detail ref="modalDetail"></delivery-detail>
                    <delivery-statistic ref="modalStatistic"></delivery-statistic>
                    <delivery-modal ref="modalForm"></delivery-modal>
                    </a-card>
                </a-col>
              </a-row>
          </a-tab-pane>
          <a-tab-pane key="4" tab="工程发票信息" forceRender>
              <a-row :gutter="24">
                <a-col :md="24">
                  <a-card :bordered="false">
                     <div class="table-operator" style="border-top: 5px">
                       <a-button type="primary" @click="searchQuery()">获取数据</a-button>
                      
                    </div>
                    <div>
                      <a-table
                        ref="table3"
                        bordered
                        size="middle"
                        rowKey="id"
                        :columns="erTable.columns"
                        :dataSource="erTable.dataSource"
                        :pagination="ipagination"
                        :loading="erTable.loading"
                        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                        :actionButton="true"
                        @change="handleTableChange">
                        <span slot="action" slot-scope="text, record">
                          <a @click="myReceiptDetail(record)">查看</a>
                           <a-divider  type="vertical" />
                           <a @click="receiptEdit(record)">编辑</a>
                        </span>
                      </a-table>
                    </div>
                    <receipt-detail ref="receiptDetail"></receipt-detail>
                    <receipt-modal ref="receiptModal"></receipt-modal>
                  </a-card>
                </a-col>
              </a-row>
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-spin>
  </j-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import JDate from '@/components/jeecg/JDate'
  import EngineerProduceDetail from '../dialog/EngineerProduceDetail'
  import EngineerProduceStatistic from '../dialog/EngineerProduceStatistic'
  import ReceiptDetail from '../../receipt/dialog/ReceiptDetail'
  import ReceiptModal from '../../receipt/modules/ReceiptModal'
  import DeliveryDetail from '../../delivery/dialog/DeliveryDetail'
  import DeliveryModal from '../../delivery/modules/DeliveryModal'
  import DeliveryStatistic from '../../delivery/dialog/DeliveryStatistic'
  import {getEngineerInfo} from '@/api/api'
  import EngineerProduceModal from '../modules/EngineerProduceModal'
  import Vue from 'vue'
  export default {
    name: "EngineerInfoModal",
    mixins: [JeecgListMixin],
    components: {
      JImageUpload,
      EngineerProduceDetail,
      EngineerProduceStatistic,
      ReceiptDetail,
      ReceiptModal,
      DeliveryDetail,
      DeliveryModal,
      DeliveryStatistic,
      JDate,
      EngineerProduceModal
    },
    data () {
      return {
        title:"操作",
        visible: false,
        fileList:[],
        model: {},
        engineerId:"",
        isReadOnly: false,
        prefixNo: 'engineerInfo',
        key:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
         esTable: {
          loading: false,
          dataSource: [],
          confirmLoading: false,
          columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:40,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          { title: '产品名称', dataIndex: 'name', width: 100, align: "center"},
          { title: '产品型号', dataIndex: 'model', width: 80, align: "center" },
          { title: '产品规格(宽*高*长)', dataIndex: 'size', width:160, align: "center" },
          { title: '产品数量', dataIndex: 'num', width: 60, align: "center" },
          { title: '产品单位', dataIndex: 'unit', width: 60, align: "center" },
          { title: '产品状态', dataIndex: 'state', width: 60, align: "center",scopedSlots: { customRender: 'customRenderFlag' }},
          { title: '创建人', dataIndex: 'createUserStr', width: 80, align: "center"},
          { title: '创建时间', dataIndex: 'createTimeStr', width: 120, align: "center"},
          { title: '审核人', dataIndex: 'updateUserStr', width: 80, align: "center"},
          { title: '审核时间', dataIndex: 'updateTimeStr', width: 120, align: "center"},
           {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 160
          }
           ]
        },
         erTable: {
          loading: false,
          dataSource: [],
          confirmLoading: false,
          columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:40,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          { title: '工程名称', dataIndex: 'engineerName', width: 120, align: "center"},
          { title: '合同金额', dataIndex: 'engineerMoney', width: 100, align: "center" },
          { title: '已开票金额', dataIndex: 'amounted', width: 100, align: "center" },
          { title: '开票金额', dataIndex: 'amount', width: 100, align: "center" },
          { title: '开票批次', dataIndex: 'batch', width: 60, align: "center" },
          { title: '创建时间', dataIndex: 'createTimeStr', width: 140, align: "center"},
             {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 160
          }
           ]
        },
         edTable: {
          loading: false,
          dataSource: [],
          confirmLoading: false,
          columns: [
          {
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:40,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          { title: '工程名称', dataIndex: 'engineerName', width: 100, align: "center"},
          { title: '发货批次', dataIndex: 'batch', width: 100, align: "center"},
          { title: '发货状态', dataIndex: 'state', width: 60, align: "center" ,scopedSlots: { customRender: 'customRenderFlag' }},
          { title: '创建人', dataIndex: 'createUserStr', width: 70, align: "center"},
          { title: '创建时间', dataIndex: 'createTimeStr', width: 140, align: "center"},
             {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 160
          }
           ]
        },
        url: {
          list: "/engineer/list"
        },
        confirmLoading: false,
        form: this.$form.createForm(this)
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
    },
    methods: {
      show(record) {
        this.visible = true;
        this.model = Object.assign({}, record);
        this.$nextTick(() => {
          this.project_info_form.setFieldsValue(pick(this.model,'name','unit','nameA','taxpayerInfo','money','type','description'))
        });
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.engineerId = record.id;
        this.model.engineerId = record.id
        this.visible = true;
        this.activeKey = '1'
        this.getEngineerInfo(this.key);
      },
      close () {
        this.visible = false;
        this.$emit('close');
        this.disableSubmit = false;
        this.activeKey = '1'
      },

      handleCancel () {
        this.close()
      },
      myProduceDetail(record) {
        this.$refs.engineerProduceDetail.show(record);
        this.$refs.engineerProduceDetail.title="详情";
      },
       myReceiptDetail(record) {
        this.$refs.receiptDetail.edit(record);
        this.$refs.receiptDetail.title="详情";
      },
       myDeliveryDetail(record,type) {
        this.$refs.modalDetail.show(record,type);
        this.$refs.modalDetail.title=type+"详情";
      },
       myStatisticDevliery(record,type) {
        this.$refs.modalStatistic.show(record,type);
        this.$refs.modalStatistic.title=type+"详情";
      },
      myStatisticProduce(record,type) {
        this.$refs.produceStatistic.show(record,type);
        this.$refs.produceStatistic.title=type+"详情";
      },
      myHandleProduce: function(record) {
        this.$refs.engineerProduceModal.add(record);
        this.$refs.engineerProduceModal.title = "产品下单";
        this.$refs.engineerProduceModal.disableSubmit = false;
      },
       produceEdit: function(record) {
        this.$refs.engineerProduceModal.edit(record);
        this.$refs.engineerProduceModal.title = "编辑";
        this.$refs.engineerProduceModal.disableSubmit = false;
      },
       deliveryEdit: function(record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
       receiptEdit: function(record) {
        this.$refs.receiptModal.edit(record);
        this.$refs.receiptModal.title = "编辑";
        this.$refs.receiptModal.disableSubmit = false;
      },
      getEngineerInfo(key, success){
         getEngineerInfo({type:key,engineerId:this.engineerId}).then((res) => {
           this.key = key;
          if(res && res.code === 200){
            if(key === '2'){
              this.esTable.dataSource = res.data.rows
            }else if(key === '3'){
               this.edTable.dataSource = res.data.rows
            }else if(key === '4'){
               this.erTable.dataSource = res.data.rows
            }
            typeof success === 'function' ? success(res) : ''
          }
        }).finally(() => {
          this.loading = false
        })
      },
      searchQuery(){
         getEngineerInfo({type: this.key,engineerId:this.engineerId}).then((res) => {
          if(res && res.code === 200){
            if(this.key === '2'){
              this.esTable.dataSource = res.data.rows
            }else if(this.key === '3'){
               this.edTable.dataSource = res.data.rows
            }else if(this.key === '4'){
               this.erTable.dataSource = res.data.rows
            }
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>
<style scoped>
  .input-table {
    max-width: 100%;
    min-width: 1550px;
  }
</style>